<template>
  <div :class="['c-formItem flex-middle', tip ? 'tip' : '', labelType]">
    <cfgEditTable v-if="config.type === 'editTable'"
      class="ivu-mb"
      v-bind="config"
      v-model="editValue"
    />
    <FormItem v-else v-bind="formItemProps" :style="formItemProps.style">
      <Tooltip slot="label" class="labelTip" placement="top" :content="tip" transfer :disabled="!tip">
        {{ formItemProps.label }}
      </Tooltip>
      <component v-if="config.type === 'pointer'" :is="`cfg-${config.pointerName}-pointer`" v-model="editValue"
        v-bind="{...config, ...config.props || {}}" @change="change" />
      <fieldCell v-else :config="config" v-model="editValue" @change="change" @select="select" @create="create"/>
    </FormItem>
    <div class="optwp">
      <span v-if="addField" class="action" @click="$emit('addField')">+</span>
      <span v-if="removeField" class="action" @click="$emit('removeField')">-</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "field-item",
  data(){
    return {
      editValue: this.value,
      uploadList: []
    }
  },
  components: {  },
  model:{
    prop:'value',
    event:"change"
  },
  props:{
    // label的样式：white 白色背景（默认）, black 灰色背景 blackMargin 灰色背景并且有label右侧有margin
    labelType: {
      default() {
        return '';
      }
    },
    value: {
      default() {
        return null;
      }
    },
    formItemProps: {
      default() {
        return {};
      }
    },
    config: {
      default() {
        return {type: 'text'};
      }
    },
    addField: {
      default: () => {
        return false;
      }
    },
    removeField: {
      default: () => {
        return false;
      }
    },
    tip: {
      default: () => {
        return null;
      }
    },
    mark:{
      default: () => {
        return true;
      }
    }
  },
  computed: {
  },
  mounted() {
  },
  watch: {
    value(newVal) {
      this.editValue = newVal;
    }
  },
  methods:{
    change(val) {
      this.$emit('change', val)
    },
    select(val) {
      this.$emit('select', val);
    },
    create(val) {
      this.$emit('create', val);
    },
  }
}
</script>

<style lang="less" scoped>
.c-formItem {
  margin-top: 0;
  margin-bottom: 24px;
  /deep/ .ivu-form-item {
    flex: 1;
    margin-bottom: 0;
  }
  &.black, &.blackMargin {
    margin-top: 2px;
    margin-bottom: 2px;
    /deep/ .ivu-form-item-label {
      padding: 8px 12px 8px 0;
      border: 1px solid #dcdee2;
      border-radius: 4px 0px 0px 4px;
      background-color: #f7f7f7;
      border-right: none;
    }
    /deep/ .ivu-select-selection, /deep/ input {
      border-radius: 0 4px 4px 0;
    }
  }
  &.blackMargin {
    position: relative;
    /deep/ .ivu-form-item-label {
      border: 1px solid #dcdee2;
      border-radius: 4px;
    }
    /deep/ .ivu-select-selection, /deep/ input {
      border-radius: 4px;
    }
    /deep/ .ivu-form-item-content {
      // position: absolute;
      left: 5px;
      right: 0;
  }
  }
  &.tip {
    /deep/ .ivu-form-item-label {
      // position: relative;
      // top: 1.4px;
      padding: 0;
    }
    .labelTip {
      display: block;
      padding: 8px 12px 8px 0;
    }
  }
  .optwp {
    height: 30px;
    line-height: 30px;
    background-color: #f7f7f7;
  }
  .action {
    float: right;
    // display: inline-block;
    width:20px;
    margin: 0 5px;
    cursor: pointer;
    text-align: center;
  }
}
</style>
